<script>
import {mapActions, mapState} from "vuex";
import EditPositions from "@/views/map/dialog/MapEditElement/EditOption/EditPositions.vue";

export default {
  name: "EditPolyline",
  data(){
    return {
      //是否编辑原始数据
      editIsOriginal:false,
    }
  },
  components: {EditPositions},
  computed: {
    ...mapState("EditElement", {
      element: "element",
      path: "path",
    }),
    Path: {
      get() {
        const opt = JSON.stringify(this.path)
        return opt
      },
      set(newValue, oldValue) {
        const opt = JSON.parse(newValue);
        this.setPath(opt)
      }
    }
  },
  methods: {
    ...mapActions("EditElement",{
      setPath: "setPath",
    })
  }
}
</script>

<template>
  <table class="tb">
    <tr>
      <td class="td-name">颜色</td>
      <td class="td-data">
        <el-color-picker v-model="element.getElement().strokeColor"></el-color-picker>
      </td>
    </tr>
    <tr v-if="element.getElement().fillColor">
      <td class="td-name">填充颜色</td>
      <td class="td-data">
        <el-color-picker v-model="element.getElement().fillColor"></el-color-picker>
      </td>
    </tr>

    <tr>
      <td class="td-data" colspan="2">
        <el-switch
            v-model="editIsOriginal"
            active-text="原始数据"
            inactive-text="数据框"></el-switch>

      </td>
    </tr>
    <tr>
      <td colspan="2">
        <div v-if="editIsOriginal">
          <textarea ref="PolygonPath" rows="5"  v-model="Path" class="el-textarea"></textarea>
        </div>
        <div v-else>
          <EditPositions
              :positions="element.getElement().path"></EditPositions>
        </div>
      </td>
    </tr>
  </table>
</template>

<style scoped>

</style>